<% include ./side.html %>
<style scoped>
	.com_block{
		padding-bottom: 10px;
	}
	.survey {
		padding-left:30px;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}

	.survey .com {
		width:185px;
		font-size: 32px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-right:35px;
		margin-bottom:20px;
	}

	.survey .pv {
		font-size: 38px;
		font-weight: bold;
		color: #8776f7;
		flex-wrap: wrap;
	}

	.survey .com span {
		font-size: 22px;
		margin-right: 20px;
	}

	.search_1 .inp {
		background: #fff;
	}

	@media (max-width: 768px) {
		.survey .com {
			margin-left: 0 !important;
			font-size: 20px;
			width: 100px;
			text-align: center;
			display: flex;
			align-items: center;
			flex-direction: column;
		}

		.survey .com span {
			margin-right: 3px;
			display: block;
		}
	}
</style>
<div class="com_content_body main pb100" id="vue_id" v-cloak>
	<h1 class="com_h1">数据分析</h1>
	<div class="com_slide_tab_x mt30 mb30">
		<div class="item" :class="{'active':lable==1}" @click="checkoutLabel(1)">概况</div>
		<div class="item" :class="{'active':lable==2}" @click="checkoutLabel(2)">PV|AJAX|UV|IP|FLOW</div>
	</div>
	<div v-show="lable==1">
		<div class="com_topic mb20"><span class="iconfont">&#xe63a;</span>实时概况处理同步有{{timebetween}}分钟以内的延迟，每{{timebetween}}分钟自动更新一次。</div>
		<div class="com_block mt20">
			<h1 class="com_h2 mb20">查询某日概况</h1>
			<div class='search mb20'>
				<input id="zane-calendar-1" class="inp" type="text" placeholder="点击选择日期">
				<div class="tipscolor mt10" v-if="errTextleft">{{errTextleft}}</div>
			</div>
			<div class="survey" v-if="surveyone.app_id">
				<div class="com pv"><span>PV: </span>{{surveyone.pv}}</div>
				<div class="com uv"><span>UV: </span>{{surveyone.uv}}</div>
				<div class="com ip"><span>IP: </span>{{surveyone.ip}}</div>
				<div class="com ip"><span>AJAX: </span>{{surveyone.ajax}}</div>
				<div class="com ip"><span>跳出率: </span>{{surveyone.bounce||'0%'}}</div>
				<div class="com ip"><span>访问深度: </span>{{surveyone.depth||0}}</div>
				<div class="com ip"><span>流量: </span>{{surveyone.flow|flow}}</div>
			</div>
		</div>
		<div class="com_block mt20">
			<h1 class="com_h2 mb20">今日概况</h1>
			<div class="survey">
				<div class="com pv"><span>PV: </span>{{today.pv||0}}</div>
				<div class="com uv"><span>UV: </span>{{today.uv||0}}</div>
				<div class="com ip"><span>IP: </span>{{today.ip||0}}</div>
				<div class="com ip"><span>AJAX: </span>{{today.ajax||0}}</div>
				<div class="com ip"><span>流量: </span>{{today.flow|flow}}</div>
			</div>
		</div>
		<div v-if="historylist.length" >
			<div class="com_block mt20" v-for="(item,index) in historylist" :key="index">
				<h1 class="com_h2 mb20">{{item.create_time|date}}</h1>
				<div class="survey">
					<div class="com pv"><span>PV: </span>{{item.pv||0}}</div>
					<div class="com uv"><span>UV: </span>{{item.uv||0}}</div>
					<div class="com ip"><span>IP: </span>{{item.ip||0}}</div>
					<div class="com ip"><span>AJAX: </span>{{item.ajax||0}}</div>
					<div class="com ip"><span>跳出率: </span>{{item.bounce||'0%'}}</div>
					<div class="com ip"><span>流量: </span>{{item.flow|flow}}</div>
				</div>
			</div>
		</div>
	</div>
	<div v-show="lable==2">
		<div class="com_topic mb20"><span class="iconfont">&#xe63a;</span> 实时数据处理同步有{{timebetween}}分钟以内的延迟，实时统计每{{timebetween}}分钟自动更新一次。流量统计以（M）为单位。</div>
		<div class='search search_1 mb20'>
			<input id="zane-calendar-2" class="inp" type="text" :placeholder="'时间粒度选择'+searchbetween+'小时以内'">
			<div class="tipscolor mt10" v-if="errText">{{errText}}</div>
		</div>
		<div class="com_block">
			<h1 class="com_h2 mb20">实时访问AJAX</h1>
			<div id="pvuvip_ajax" style="height:400px"></div>
		</div>
		<div class="com_block">
			<h1 class="com_h2 mb20">实时访问PV</h1>
			<div id="pvuvip_pv" style="height:400px"></div>
		</div>
		<div class="com_block mt20">
			<h1 class="com_h2 mb20">实时访问UV</h1>
			<div id="pvuvip_uv" style="height:400px"></div>
		</div>
		<div class="com_block mt20">
			<h1 class="com_h2 mb20">实时访问IP</h1>
			<div id="pvuvip_ip" style="height:400px"></div>
		</div>
		<div class="com_block mt20">
			<h1 class="com_h2 mb20">实时流量统计</h1>
			<div id="pvuvip_flow" style="height:400px"></div>
		</div>
	</div>
</div>

<script>
	let myChartPV, myChartUV, myChartIP, myChartAJAX, myChartFLOW;
	new Vue({
		el: '#vue_id',
		data: function () {
			return {
				lable: 1, //1:概况 2：pv|uv|ip
				beginTime: '',
				endTime: '',
				timer: null,
				appId: util.getStorage('local', 'appId'),
				datalist: [],
				today: {},
				surveyone: {},
				errText: '',
				errTextleft: '',
				historylist: [],
				timebetween:1,
				searchbetween:1,
			}
		},
		filters: {
			date: window.Filter.date,
			flow:window.Filter.flow,
		},
		mounted() {
			this.xAxislist = [];
			this.itemlist1 = [];
			this.itemlist2 = [];
			this.itemlist3 = [];
			this.itemlist4 = [];
			this.itemlist5 = [];

			this.getPvUvIpSurvey();
			this.getHistoryPvUvIplist();
			zaneDate({
				elem: '#zane-calendar-1',
				width: 300,
				done: (fulltime, begintime, endtime) => {
					let beginTime = begintime + ' 00:00:00'
					let endTime = begintime + ' 23:59:59'
					const maxday = new Date(new Date().format('yyyy/MM/dd') + ' 00:00:00').getTime();
					const beginday = new Date(beginTime).getTime();
					if (beginday >= maxday) {
						this.errTextleft = '选择时间不能大于今日，请选择小于今日的历史间进行查询。';
						return;
					}
					this.errTextleft = '';
					this.getPvUvIpSurveyOne(beginTime, endTime)
				},
			})
			zaneDate({
				elem: '#zane-calendar-2',
				type: 'doubleday',
				format: 'yyyy/MM/dd HH:mm:ss',
				showtime: true,
				done: (fulltime, begintime, endtime) => {
					this.errText = '';
					let beginstrap = new Date(begintime).getTime();
					let endstrap = new Date(endtime).getTime();
					let between = endstrap - beginstrap;
					let maxtime = this.timebetween * 60 * 1000 * 30;
					if (between < 0) {
						this.errText = "结束时间不能小于开始时间。";
						return false;
					}
					if (between > maxtime) {
						this.errText = `时间粒度选择${this.searchbetween}小时以内，支持所有时间段的查询。`;
						return false;
					}
					this.beginTime = begintime;
					this.endTime = endtime;
					this.getPvUvIpList();
				},
			})
		},
		methods: {
			checkoutLabel(lable) {
				if(lable === this.lable) return;
				this.lable = lable;
				this.beginTime = '';
				this.endTime = '';

				if (lable == 1) {
					this.getPvUvIpSurvey();
					this.getHistoryPvUvIplist();
				} else if (lable == 2) {
					this.getPvUvIpList();
				};
			},
			// 概况
			getPvUvIpSurvey() {
				util.ajax({
					type: 'get',
					nohideloading: true,
					url: `${config.baseApi}api/v1/wx/pvuvip/getPvUvIpSurvey`,
					data: {
						appId: this.appId,
						beginTime: this.beginTime,
						endTime: this.beginTime,
					},
					success: (data) => {
						if (data.time) {
							this.timebetween = data.time / 1000 / 60;
							this.searchbetween = data.time * 30 / 1000 / 60 / 60;
						}
						this.today = data.data;
					}
				})
			},
			// 某日概况
			getPvUvIpSurveyOne(beginTime, endTime) {
				util.ajax({
					type: 'get',
					url: `${config.baseApi}api/v1/wx/pvuvip/getPvUvIpSurveyOne`,
					data: {
						appId: this.appId,
						beginTime: beginTime,
						endTime: endTime,
					},
					success: (data) => {
						this.surveyone = data.data;
					}
				})
			},
			// 历史统计列表
			getHistoryPvUvIplist() {
				util.ajax({
					type: 'get',
					url: `${config.baseApi}api/v1/wx/pvuvip/getHistoryPvUvIplist`,
					data: {
						appId: this.appId,
					},
					success: (data) => {
						this.historylist = data.data || [];
					}
				})
			},
			getPvUvIpList(isInter) {
				clearInterval(this.timer);
				util.ajax({
					url: `${config.baseApi}api/v1/wx/pvuvip/getPvUvIpList`,
					data: {
						appId: this.appId,
						beginTime: this.beginTime,
						endTime: this.endTime,
					},
					success: (data) => {
						if(data.time){
							this.timebetween = data.time / 1000 / 60;
							this.searchbetween = data.time * 30 / 1000 / 60 / 60;
						}
						this.xAxislist = [];
						this.itemlist1 = [];
						this.itemlist2 = [];
						this.itemlist3 = [];
						this.itemlist4 = [];
						this.itemlist5 = [];
						data.data.forEach(item => {
							let time = new Date(item.time).format('hh:mm');
							this.xAxislist.push(time);
							this.itemlist1.push(item.pv)
							this.itemlist2.push(item.uv)
							this.itemlist3.push(item.ip)
							this.itemlist4.push(item.ajax)
							this.itemlist5.push(item.flow)
						});
						this.drow('PV', this.xAxislist, this.itemlist1);
						this.drow('UV', this.xAxislist, this.itemlist2);
						this.drow('IP', this.xAxislist, this.itemlist3);
						this.drow('AJAX', this.xAxislist, this.itemlist4);
						this.drow('FLOW', this.xAxislist, this.itemlist5);
						this.timer = setInterval(() => {
							this.getPvUvIpOne();
						}, data.time || 60000)
					}
				})
			},
			getPvUvIpOne() {
				util.ajax({
					url: `${config.baseApi}api/v1/wx/pvuvip/getPvUvIpOne`,
					data: {
						type: this.type,
						appId: this.appId,
					},
					success: (data) => {
						let datas = data.data;
						let time = new Date(datas.time).format('mm');
						// 动态数据接口 addData
						this.xAxislist.shift();
						this.itemlist1.shift();
						this.itemlist2.shift();
						this.itemlist3.shift();
						this.itemlist4.shift();
						this.itemlist5.shift();

						this.xAxislist.push(time);
						this.itemlist1.push(datas.pv || 0)
						this.itemlist2.push(datas.uv || 0)
						this.itemlist3.push(datas.ip || 0)
						this.itemlist4.push(datas.ajax || 0)
						this.itemlist5.push(datas.flow || 0)

						myChartPV.setOption({ series: [{ data: this.itemlist1 }] });
						myChartUV.setOption({ series: [{ data: this.itemlist2 }] });
						myChartIP.setOption({ series: [{ data: this.itemlist3 }] });
						myChartAJAX.setOption({ series: [{ data: this.itemlist4 }] });
						myChartFLOW.setOption({ series: [{ data: this.itemlist5 }] });
					}
				})
			},
			drow(type, xAxislist, itemlist) {
				// 基于准备好的dom，初始化echarts图表
				let color = '';
				if (type == 'PV') {
					myChartPV = echarts.init(document.getElementById('pvuvip_pv'));
					color = '#42aaff'
				} else if (type == 'UV') {
					myChartUV = echarts.init(document.getElementById('pvuvip_uv'));
					color = '#58d17e'
				} else if (type == 'IP') {
					myChartIP = echarts.init(document.getElementById('pvuvip_ip'));
					color = '#f46d85'
				} else if (type == 'AJAX') {
					myChartAJAX = echarts.init(document.getElementById('pvuvip_ajax'));
					color = '#8776f7'
				} else if(type == 'FLOW'){
					myChartFLOW = echarts.init(document.getElementById('pvuvip_flow'));
					color = '#8776f7'
				}
				const option = {
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: [type]
					},
					color: [color],
					toolbox: {
						show: false,
						feature: {
							mark: { show: true },
							magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
							restore: { show: true },
							saveAsImage: { show: false }
						}
					},
					grid: {
						borderWidth: 0,
					},
					xAxis: [
						{
							type: 'category',
							data: xAxislist,
							splitLine: {
								show: false,
							},
							axisTick: {
								show: true,
								lineStyle: {
									color: '#eee',
								}
							},
							axisLabel: {
								show: true,
								textStyle: {
									color: '#B7B7B7',
									fontSize: 10,
								},
							},
						}
					],
					yAxis: [
						{
							type: 'value',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#B7B7B7',
								}
							},
							splitLine: {
								show: true,
								lineStyle: {
									type: 'dashed',
									color: '#eee',
									width: 1,
								}
							},
							axisLine: {
								show: false,
							},
						}
					],
					series: [
						{
							name: type,
							type: 'line',
							smooth: true,
							itemStyle: { normal: { areaStyle: { type: 'default' } } },
							data: itemlist
						},
					]
				};
				// 为echarts对象加载数据 
				if (type == 'PV') {
					myChartPV.setOption(option);
				} else if (type == 'UV') {
					myChartUV.setOption(option);
				} else if (type == 'IP') {
					myChartIP.setOption(option);
				} else if (type == 'AJAX') {
					myChartAJAX.setOption(option);
				} else if (type == 'FLOW') {
					myChartFLOW.setOption(option);
				}
			}
		},
	})


</script>